<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        height: 800px;
        width: 150%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin: 0 auto;
      }

      .background {
        background-image: url(https://wallpapercave.com/wp/wp2291136.jpg);
        /* SECOND OPTION
  url(https://media.istockphoto.com/photos/heaven-cloud-sky-sunny-bright-for-future-wealth-fortune-day-concept-picture-id1015820498?k=20&m=1015820498&s=612x612&w=0&h=082w5mKilRrIKFTAKaa__rF0AHA6cchI-4wQdTJ5280=); */ /* THIRD OPTION
url(https://i.pinimg.com/originals/25/66/1d/25661d7ef9509fc26bdbfb350a872e18.jpg); */
        background-size: cover;
        background-repeat: no-repeat;
        margin: -8px;
        width: 110%;
      }

      .border {
        height: 370px;
        width: 290px;
        background: transparent;
        border-radius: 10px;
        position: relative;
      }

      .box {
        height: 300px;
        width: 300px;
        transition: background 0.8s;
        background: black;
        border-radius: 15px;
        box-shadow: 0 10px 80px 40px rgba(255, 255, 255, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin: 45px;
      }

      .box0 {
        background: url(https://m.media-amazon.com/images/M/MV5BMTk2NTI5NDEyMV5BMl5BanBnXkFtZTgwNTA2NDkxNDM@._V1_UY1200_CR85,0,630,1200_AL_.jpg)
          no-repeat;
        background-size: 300px;
      }

      .box0:hover {
        background: url(https://i1.sndcdn.com/artworks-yZ7UGJRyStaHJ1Eh-jnlN8Q-t500x500.jpg)
          no-repeat;
        background-size: 300px;
        transition: 3s;
      }

      .box1 {
        background: url(https://i.pinimg.com/236x/ce/dc/30/cedc30cda41ecc67ffbb056bad1be4f4.jpg)
          no-repeat;
        background-size: 300px;
      }

      .box1:hover {
        background: url(https://i1.sndcdn.com/artworks-000614137342-u6n93d-t500x500.jpg)
          no-repeat; /* SECOND CHOICE
    url(https://wallpapercave.com/wp/wp4468071.jpg) no-repeat; */
        background-size: 300px;
        transition: 4s;
      }

      .box2 {
        background: url(https://thefader-res.cloudinary.com/private_images/w_750,c_limit,f_auto,q_auto:eco/dxs24xhvyaagand_wjf3wv/dxs24xhvyaagand_wjf3wv.jpg)
          no-repeat;
        background-size: 300px;
      }

      .box2:hover {
        background: /* SECOND CHOICE
    url(https://mir-s3-cdn-cf.behance.net/projects/404/a0ca9d91185805.Y3JvcCwxMDgwLDg0NCwwLDIzMg.png) no-repeat; */
          url(https://i.pinimg.com/474x/58/a2/a6/58a2a6a95ff906888bdb4fa78f780a56.jpg)
          no-repeat;
        background-size: 300px;
        transition: 3s;
      }

      .box3 {
        background: url(https://images.sk-static.com/images/media/profile_images/artists/9550809/huge_avatar)
          no-repeat;
        background-size: 300px;
      }

      .box3:hover {
        background: url(https://iscale.iheart.com/v3/surl/aHR0cDovL2ltYWdlLmloZWFydC5jb20vaWhyLWluZ2VzdGlvbi1waXBlbGluZS1wcm9kdWN0aW9uLWRpc3Ryb2tpZC8yMDIwMDEyMDA2MTIzMTU0Mi8xOTUwMzcyMzAzMzYvcmVzb3VyY2VzLzE5NTAzNzIzMDMzNi5KUEc=?sn=eGtleWJhc2UyMDIxMTExMDpNNgeZVKD0RUaaRAOrvT0r_R7W08EM62dlWjPzUVTZ8g%3D%3D&surrogate=1cOXl179JY-syhxYSCX6Q1ahJ9ekBKwf7UslJDIRMVUNFyA2xnvRLG2mpnxrRJA_gd3-D2UE7z4aopVZ8-gnlgaqX0hQi9vUexMatI6eWcOjzsXvXMg4AO1hZMsW_R5Pv1JZsynI8dSaKYm21NQwHeNT609rU8yViQ389syj8UrbRLPUwFSiN31l65We3dG8N46XkWKOydyUDP82_zm_xsKIC9wjmLaUeGWn_PwdIA1XjY22I0uNIFkV2jYjaKAH89Fn4XTd8VGw-0M278T1NglLId6eTl94vnFcpEQelN3Kmo9uQZylpzisseUyF7PruR9KQcif_g%3D%3D)
          no-repeat;
        background-size: 300px;
        transition: 3s;
      }

      h1 {
        font-family: Comic Sans, Comic Sans MS, cursive;
        color: black;
        margin: -10px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        font-size: 30px;
      }

      .date0 {
        font-family: Comic Sans, Comic Sans MS, cursive;
        color: black;
        padding-top: 300px;
        display: flex;
        align-items: center;
        font-size: 20px;
      }

      .date1 {
        font-family: Comic Sans, Comic Sans MS, cursive;
        color: black;
        padding-top: 300px;
        display: flex;
        align-items: center;
        font-size: 20px;
      }

      .date2 {
        font-family: Comic Sans, Comic Sans MS, cursive;
        color: black;
        padding-top: 300px;
        display: flex;
        align-items: center;
        font-size: 20px;
      }

      .date3 {
        font-family: Comic Sans, Comic Sans MS, cursive;
        color: black;
        padding-top: 300px;
        display: flex;
        align-items: center;
        font-size: 20px;
      }

      /* STILL NEEDS WORK, NOT SURE WHAT TO ADD HERE???
@media screen and (max-width: 400px) {
  .background {
    width: 150%;
  }
  .container {
    width: 150%;
    height: 150%;
  }
  
  .box {
    display: flex;
    flex-direction: column;
  }
}
*/
    </style>
  </head>
  <body>
    <div class="container background">
      <div class="box box0 column">
        <div class="border">
          <h1>Lil Peep</h1>

          <p class="date0">
            <time datetime="1996-11-01">November 1, 1996</time
            >&nbsp;&nbsp;&nbsp;<time datetime="2017-11-15"
              >November 15, 2017</time
            >
          </p>
        </div>
      </div>

      <div class="box box1 column">
        <div class="border">
          <h1>XXXTentacion</h1>
          <p class="date1">
            <time datetime="1998-01-23">January 23, 1998 </time
            >&nbsp;&nbsp;&nbsp;<time datetime="2018-06-18">June 18, 2018</time>
          </p>
        </div>
      </div>

      <div class="box box2 column">
        <div class="border">
          <h1>Mac Miller</h1>
          <p class="date2">
            <time datetime="1992-01-19">January 19, 1992 </time
            >&nbsp;&nbsp;&nbsp;<time datetime="2018-09-07"
              >September 7, 2018</time
            >
          </p>
        </div>
      </div>

      <div class="box box3 column">
        <div class="border">
          <h1>Juice Wrld</h1>
          <p class="date3">
            <time datetime="1998-12-02">December 2, 1998 </time
            >&nbsp;&nbsp;&nbsp;<time datetime="2019-12-08"
              >December 8, 2019</time
            >
          </p>
        </div>
      </div>
    </div>
  </body>
</html>
